<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>12.雾</title>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
	<script src="https://webglfundamentals.org/webgl/resources/m4.js"></script>
	<script src="https://webglfundamentals.org/webgl/resources/primitives.js"></script>
	<script src="https://webglfundamentals.org/webgl/resources/texture-utils.js"></script>
	<script src="https://webglfundamentals.org/webgl/resources/chroma.min.js"></script>
	<script type="x-shader/x-vertex" id="vertex">
		attribute vec4 a_position;
		attribute vec3 a_normal;
		attribute vec2 a_texcoord;
		

		uniform mat4 u_projection;
		uniform mat4 u_view;
		uniform mat4 u_world;
		
varying vec2 v_texcoord;
		varying vec3 v_position;
		void main(){
			v_texcoord = a_texcoord;
			gl_Position =  u_projection * u_view * u_world  * a_position;
			v_position=(u_view  *u_world* a_position).xyz;
		}
	</script>
	<script type="x-shader/x-fragment" id="fragment">
		precision mediump float;
		
		uniform sampler2D u_texture;
		varying vec3 v_position;
		varying vec2 v_texcoord;
		#define LOG2 0.00002/1.442695
		void main(){
			vec4 color = texture2D(u_texture, v_texcoord);
			float fogDistance = length(v_position);
			float fogAmount = 1. - exp2(-0.5 * 0.5 * fogDistance * fogDistance * LOG2);
			fogAmount = clamp(fogAmount, 0., 1.);

			gl_FragColor = mix(color, vec4(1.,1.,1.,1.), fogAmount);  
		}
	</script>
	<script>
		const canvas = document.getElementById("canvas");
		canvas.width=window.innerWidth
		canvas.height=window.innerHeight
		const gl = canvas.getContext("webgl")
		const aspect = gl.canvas.clientWidth/ gl.canvas.clientHeight;
		const programInfo=webglUtils.createProgramInfo(gl,["vertex","fragment"])
		const planeBufferInfo = primitives.createCubeBufferInfo(
			gl,
			20
		);
		gl.useProgram(programInfo.program)
		function degToRad(d) {
			return d * Math.PI / 180;
		}
		
		var texture = gl.createTexture();
		// gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

		const images = [
			{ target: gl.TEXTURE_CUBE_MAP_POSITIVE_X, image:new Image ,src:"/pos-x.jpg"},
			{ target: gl.TEXTURE_CUBE_MAP_NEGATIVE_X, image:new Image ,src:"/neg-x.jpg"},
			{ target: gl.TEXTURE_CUBE_MAP_POSITIVE_Y, image:new Image ,src:"/pos-y.jpg"},
			{ target: gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, image:new Image ,src:"/neg-y.jpg"},
			{ target: gl.TEXTURE_CUBE_MAP_POSITIVE_Z, image:new Image ,src:"/pos-z.jpg"},
			{ target: gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, image:new Image ,src:"/neg-z.jpg"},
		];
		const arrs=[]
		images.forEach((i)=>{
			arrs.push(new Promise(r=>{
				i.image.onload=(e=>{
					r(()=>{
						gl.texImage2D(i.target, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, i.image);
					})
				})	
			}))
			i.image.src=i.src
		})
    var cameraPosition = [0, 0, 2];
	// world=m4.scale(world,1,1,10)
	let t=-1

  var worldCameraPositionLocation = gl.getUniformLocation(programInfo.program, "u_worldCameraPosition");
		Promise.all(arrs).then(r=>{
			// r.forEach(i=>{
			// 	i()
			// })
    		gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,gl.UNSIGNED_BYTE, images[0].image);
       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
			// gl.generateMipmap(gl.TEXTURE_CUBE_MAP);
			// gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
				var world=m4.translation(0, 0, 0)
			setInterval(()=>{
				console.log("world[14]:",world[14]);
				const cameraMatrix = m4.lookAt([0,50,150],[0,0,world[14]],[0,1,0])
				if(world[14]>2000){
					t=-1
				}else if(world[14]<0){
					t=1
				}
				let viewMatrix=m4.inverse(cameraMatrix)
				world = m4.translate(world,0,0, t)
				for (let index = 0; index < 5; index++) {
					const projectionMatrix=m4.perspective(degToRad(60), aspect, 1, 2000);
					webglUtils.setBuffersAndAttributes(gl, programInfo, planeBufferInfo);

					webglUtils.setUniforms(programInfo, {
						u_view: viewMatrix,					//视图
						u_projection: projectionMatrix,		//投影
						u_world:m4.translate(world,0,0, index*10),	//世界
					});
					
					gl.enable(gl.CULL_FACE);
					gl.enable(gl.DEPTH_TEST);
					webglUtils.drawBufferInfo(gl, planeBufferInfo);
				}
			},0)
		})
	</script>
</body>
</html>